import styled from "styled-components";

export const StyledWord = styled.div`
// width: ${props => props.isPunctuation ? "25px" : (props.hasPinyin ? "85px" : "85px")};
text-align: center;
font-size: 22px;
`;

export const StyledYin = styled.div`
font-family: 'Comic Neue', cursive;
min-height: 25px;
line-height: 1.2;
color: ${props => props.inErrors ? 'purple' : 'gray'};
//font-weight: bold;
position: relative;
top: 8px;
`;

export const StyledXing = styled.div`
//font-family: 'Noto Serif SC', serif;
font-family: 'Comic Neue', cursive;
// font-family: 'Ma Shan Zheng', cursive;
//font-size: 40px;
color: ${props => (props.inErrors || props.isCurrent) ? "#7a1ebd" : "#4e4e4d"};
//color: #fff5f5;
// border-bottom: ${props => props.isCurrent ? "2px dashed #7a1ebd" : "none"};
margin-top: 3px;
`;

export const StyledInput = styled.input`
background-color: transparent;
border: none;
border-bottom: 1px solid #9e9e9e;
border-radius: 0;
outline: none;
height: 3rem;
width: 75%;
font-size: 26px;
margin: 0 0 8px 0;
padding: 0 0 4px;
box-shadow: none;
box-sizing: content-box;
transition: box-shadow .3s, border .3s;
::placeholder {
  font-size: 16px;
}
font-family: 'Comic Neue', cursive;
`;

export const StyledTopInput = styled(StyledInput)`
height: 1.5rem;
font-size: 22px;
margin: 0;
position: relative;
top: 8px;
text-align: center;
font-weight: bold;
`;

export const StyledInputWithTip = styled.div`
display: flex;
position: relative;
`;
